<template>
  <div ref="chatBox" class="chat-container">
    <chat-messages
      v-model:is-loading="isLoading"
      :messages="messages"
      :bot-config="botConfig"
      @suggestion-click="handleSuggestionClick"
    />
    <!--          @preview-file="previewFile"-->
    <input-area
      v-model:message="yourMessage"
      v-model:input-type="inputType"
      v-model:select-input-type-value="selectInputTypeValue"
      v-model:files="uploadedFiles"
      v-model:is-loading="isLoading"
      v-model:inputs="inputs"
      :curren-task-id="currenTaskId"
      :current-user="currentUser"
      @send-message="sendMessage"
      @upload="handleUpload"
      @remove-file="removeFile"
      @stop-message="isLoading = false"
      @handle-upload-confirm="handleUploadConfirm"
    />
    <upload-dialog
      ref="uploadDialog"
      v-model:visible="uploadVisible"
      :user="currentUser"
      @confirm="handleUploadConfirm"
    />
  </div>
</template>

<script lang="ts">
export default {
  name: 'ChatBase',
};
</script>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useDebounceFn } from '@vueuse/core';
import { MessagePlugin } from 'tdesign-vue-next';
import { ChevronDownIcon } from 'tdesign-icons-vue-next';
import { useRouter } from 'vue-router';
import { getOnlineInfo } from '@/api/coze';
import ChatMessages from './components/ChatMessage.vue';
import InputArea from './components/InputArea.vue';
import UploadDialog from './components/UploadDialog.vue';
import { getFileType } from './constants';
import icon1 from '@/assets/input-type-scheduling.png';
import icon2 from '@/assets/input-type-fault.png';
import icon3 from '@/assets/input-type-dailyMalfunctions.png';
import icon4 from '@/assets/input-type-check.png';
import icon5 from '@/assets/mall_coupon_healthcard.png';
import icon6 from '@/assets/knowledge-retrieval.png';
import { useUserStore } from '@/store';

const router = useRouter();

// 数据定义
const user = useUserStore();
const messages = reactive([]);
const yourMessage = ref('');
const isLoading = ref(false);
const uploadedFiles = ref([]);
const uploadVisible = ref(false);
const currentUser = ref(''); // 用户名
const currentConversationId = ref(null); // 用于跟踪会话ID
const currenTaskId = ref('');
const chatBox = ref(null); // 获取滚动容器引用
const inputs = ref({}); // 接口请求体 参数
const selectInputTypeValue = ref(-1);

const botConfig = reactive({
  name: '传输数智管家',
  onboarding_info: {
    prologue: '',
    suggested_questions: [],
  },
});
const inputType = ref([
  { name: '知识检索', img: icon6 },
  { name: '排班助手', img: icon1 },
  { name: '干线故障统计', img: icon2 },
  { name: '日常故障统计', img: icon3 },
  { name: '党建会议记录核查', img: icon4 },
  { name: '传输1+N报表', img: icon5 },
]);

// 方法定义（sendMessage、handleUpload 等保持不变）
// 消息发送逻辑
const sendMessage = useDebounceFn(async () => {
  if (!yourMessage.value.trim() || isLoading.value) return;

  const userMessage = {
    inputs: inputs.value,
    query: yourMessage.value.trim(), // 消息作为用户输入
    response_mode: 'streaming', // 强制使用流式
    user: currentUser.value, // 用户ID
    conversation_id: currentConversationId.value || '', // 如果需要连续对话则传入
    files: [], // 如果上传文件需补充
    auto_generate_name: true, // 可选：自动生成标题
  };
  // 判断是否存在 上传文件
  if (uploadedFiles.value && uploadedFiles.value.length > 0) {
    userMessage.files = uploadedFiles.value.map((file) => ({
      type: getFileType(file.response.extension), // 使用映射函数
      transfer_method: 'local_file',
      upload_file_id: file.response.id, // 假设已上传并获取ID
    }));
  }
  try {
    console.log(`isLoading${isLoading.value}`);
    isLoading.value = true;
    const id = generateLocalId(); // 创建本地 local_id
    await router.push({
      path: `messages/${id}`,
      query: {
        type: '1',
        inputs: JSON.stringify(userMessage.inputs),
        query: userMessage.query,
        user: userMessage.user,
      },
    });
  } catch (error) {
    console.log(error);
    isLoading.value = false;
  }
}, 300);

// 生成符合要求的 ID（示例格式：local_9923266853016021）
const generateLocalId = () => {
  // 生成 16 位数字（兼容大数，避免科学计数法）
  const randomDigits = window.crypto
    .getRandomValues(new Uint32Array(2))
    .join('') // 合并两个 32 位数字
    .padEnd(16, '0') // 确保至少 16 位，不足补零
    .slice(0, 16); // 精确截取 16 位

  return `local_${randomDigits}`;
};

// 获取智能体配置
const fetchBotConfig = async () => {
  try {
    // 调用接口获取在线配置
    const config = await getOnlineInfo();

    // 合并配置到 botConfig 对象，使用逻辑或运算符提供默认值
    Object.assign(botConfig, {
      // 基础信息配置
      name: config.name || '传输数智管家', // 智能体名称，默认值确保非空

      // 初始化引导信息
      onboarding_info: {
        prologue: config.opening_statement, // 开场白
        suggested_questions: config.suggested_questions || [], // 初始推荐问题列表

        // 回答后推荐问题配置（对象结构）
        suggested_questions_after_answer: {
          enabled: config.suggested_questions_after_answer?.enabled ?? false, // 使用可选链防止空值
        },

        // 语音转文字功能
        speech_to_text: {
          enabled: config.speech_to_text?.enabled ?? false,
        },

        // 资源引用功能
        retriever_resource: {
          enabled: config.retriever_resource?.enabled ?? false,
        },

        // 标注回复功能
        annotation_reply: {
          enabled: config.annotation_reply?.enabled ?? false,
        },
      },

      // 用户输入表单配置（处理三种控件类型）
      user_input_form:
        config.user_input_form?.map((item) => {
          const type = Object.keys(item)[0]; // 获取控件类型（text-input/paragraph/select）
          return {
            [type]: {
              label: item[type].label || '', // 控件标签文本
              variable: item[type].variable || '', // 变量名标识
              required: item[type].required ?? false, // 是否必填项
              default: item[type].default || '', // 默认值

              // 下拉菜单的特殊处理：添加选项数组
              ...(type === 'select' && {
                options: item[type].options || [], // 下拉选项列表
              }),
            },
          };
        }) || [], // 默认空数组防止undefined

      // 文件上传配置
      file_upload: {
        image: {
          enabled: config.file_upload?.image?.enabled ?? false, // 图片上传开关
          number_limits: config.file_upload?.image?.number_limits ?? 3, // 数量限制默认3
          transfer_methods: config.file_upload?.image?.transfer_methods || ['remote_url', 'local_file'], // 传输方式默认两种
        },
      },

      // 系统参数配置（单位：MB）
      system_parameters: {
        file_size_limit: config.system_parameters?.file_size_limit ?? 10, // 通用文件限制
        image_file_size_limit: config.system_parameters?.image_file_size_limit ?? 5, // 图片特殊限制
        audio_file_size_limit: config.system_parameters?.audio_file_size_limit ?? 10, // 音频文件限制
        video_file_size_limit: config.system_parameters?.video_file_size_limit ?? 20, // 视频文件限制
      },
    });

    // 调试输出（使用JSON转换避免对象引用问题）
    // console.log('完整智能体配置:', JSON.parse(JSON.stringify(botConfig)));
    // await MessagePlugin.success('配置加载成功');
  } catch (error) {
    console.error('获取配置失败:', error);
    await MessagePlugin.error('智能体配置加载失败，使用默认配置'); // 友好错误提示
  }
};

// 获取用户信息
const fetchUserInfo = async () => {
  currentUser.value = user.userInfo?.name || 'CMCC';
};

const handleUploadConfirm = (fileList) => {
  // 将新上传的文件合并到列表
  uploadedFiles.value = [...uploadedFiles.value, ...fileList];
};

const handleUpload = () => {
  uploadVisible.value = true;
};

const removeFile = (index) => {
  uploadedFiles.value.splice(index, 1);
};

// 处理推荐问题点击
const handleSuggestionClick = (question) => {
  yourMessage.value = question;
  sendMessage();
};

onMounted(() => {
  fetchBotConfig();
  fetchUserInfo();
});
</script>

<style lang="less" scoped>
@import url('./index.less');
.custom-back-bottom {
  transform: rotate(180deg); /* 翻转箭头方向 */
  //bottom: 80px; /* 调整默认位置 */
}
</style>
